<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="680px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改广告位参数' : '添加广告位参数'"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >

    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="广告位名称:" prop="title">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.title"
          placeholder="请输入广告位名称"
        />
      </el-form-item>

      <el-form-item label="模型名称:" prop="class_name">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.class_name"
          placeholder="请输入模型名称"
        />
      </el-form-item>

      <el-form-item label="广告媒体:" prop="media_id">
        <PageSelect
          :placeholder="'请选择广告媒体'"
          v-model="form.media_id"
          :whereName="'name'"
          :url="'/BoxAdField/getAdMediaList'"
          :optionLable="'name'"
          :optionvalue="'id'"
          :multiple="false"
        />
      </el-form-item>

      <el-form-item label="广告点击回调地址:" prop="ad_click_link">
        <el-input
          clearable
          v-model="form.ad_click_link"
          placeholder="请填写广告点击回调地址"
        />
      </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import PageSelect from "@/components/pageSelect/index.vue";

    export default {
        name: "Edit",
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: Object
        },
        components: {PageSelect},
        data() {
            return {
                // 表单数据
                form: Object.assign({}, this.data),
                // 表单验证规则
                rules: {
                    title: [{required: true, message: "请输入广告位名称", trigger: "blur"}],
                    class_name: [{required: true, message: "请输入模型名称", trigger: "blur"}],
                    media_id: [{required: true, message: "请选择广告媒体", trigger: "blur"}],
                },
                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false
            };
        },
        watch: {
            visible(val) {
                if (val) {
                    if (this.data) {
                        this.form = Object.assign({}, this.data)
                        this.isUpdate = true;
                    } else {
                        this.form = {};
                        this.isUpdate = false;
                    }
                }
            }
        },
        methods: {

            /* 保存编辑 */
            save() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http
                            .post("/BoxAdField/edit", this.form)
                            .then(res => {
                                this.loading = false;
                                if (res.data.code === 0) {
                                    this.$message({type: "success", message: res.data.msg});
                                    if (!this.isUpdate) {
                                        this.form = {};
                                    }
                                    this.updateVisible(false);
                                    this.$emit("done");
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch(e => {
                                this.loading = false;
                                this.$message.error(e.message);
                            });
                    } else {
                        return false;
                    }
                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit("update:visible", value);
            }
        }
    };
</script>
